<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>08_员工列表练习</title>
    </head>
    <body>
        <input type="text" id="i1" placeholder="请输入员工姓名">
        <input type="text" id="i2" placeholder="请输入员工工资">
        <input type="text" id="i3" placeholder="请输入员工岗位">
        <button onclick="addEmp()">添加员工</button>
        <hr>
        <table border="1px">
            <caption>员工表</caption>
            <tr>
                <th>姓名</th>
                <th>工资</th>
                <th>岗位</th>
            </tr>
        </table>

        <script>
            //8.准备一个数组,用来保存收集到的数据,给后端发请求时使用
            let arr = [];
            //1.定义方法,每次点击新增员工按钮时调用
            function addEmp(){
                //2.获取输入框中的数据
                let uName = document.getElementById('i1').value;
                let uSalary = document.getElementById('i2').value;
                let uJob = document.getElementById('i3').value;
                //3.创建1个tr与3个td元素
                let tr = document.createElement('tr');
                let nameTd = document.createElement('td');
                let salaryTd = document.createElement('td');
                let jobTd = document.createElement('td');
                //4.将上方从输入框中收集到的数据装入单元格中
                nameTd.innerHTML = uName;
                salaryTd.innerHTML = uSalary;
                jobTd.innerHTML = uJob;
                //5.将准备好的单元格追加在tr之后
                tr.append(nameTd,salaryTd,jobTd);
                //6.获取表格元素
                let table = document.querySelector('table')
                table.append(tr);
                //7.清空输入框
                document.getElementById('i1').value = '';
                document.getElementById('i2').value = '';
                document.getElementById('i3').value = '';
                //9.将收集到的员工数据存入表格中
                arr.push({
                    name:uName,
                    salary:uSalary,
                    job:uJob
                });
                console.log(arr);

            }

        </script>
    </body>
</html>